import { HotArticle } from '../../api/Home/index';
import { useEffect, useState } from 'react';
import { Divider, List, Typography, Modal } from 'antd';
import MarkdownToJsx from '../MarkdownToJsx/MarkdownToJsx';
const HotArticles = () => {

    const [hotArticles, setHotArticles] = useState([]);

    const [ArticleDetail, setArticleDetail] = useState([]);

    useEffect(() => {
        HotArticle().then(({ data }) => {
            console.log(data.data);
            setHotArticles(data.data);
        });
    }, []);

    const [isModalOpen, setIsModalOpen] = useState(false);//弹窗控制

    const showModal = () => {//展开弹窗
        setIsModalOpen(true);
    };
    const handleOk = () => {//确定关闭弹窗
        setIsModalOpen(false);
    };
    const handleCancel = () => {//取消关闭弹窗
        setIsModalOpen(false);
    };

    return (
        <>
            <Modal
                title={ArticleDetail.title}
                closable={{ 'aria-label': 'Custom Close Button' }}
                open={isModalOpen}
                onOk={handleOk}
                onCancel={handleCancel}
                width={1200}
            >
                <MarkdownToJsx content={ArticleDetail.content}></MarkdownToJsx>
            </Modal>
            <List
                size="large"
                header={<div>热门文章</div>}
                footer={<div style={{ color: "gray" }}>@2024天枢笔记 | 数字创作服务平台</div>}
                bordered
                dataSource={hotArticles}
                renderItem={item => <List.Item onClick={() => { setArticleDetail(item),setIsModalOpen(true) }}>{item.title}</List.Item>}

            />
        </>
    )
}


export default HotArticles;